/* eslint-disable react/jsx-no-undef */
import React from 'react'
import { Button, Radio,  Tag, PaginationProps,Pagination  } from 'antd'
import { PlusCircleTwoTone, MinusCircleTwoTone,RightOutlined,UpOutlined  } from "@ant-design/icons";
import { Table, Space,Icon } from 'antd';
const columns = [
  {
    title: '部门名称',
    dataIndex: 'name',
    key: 'name',
    width:'12%'
  },
  {
    title: '员工数',
    dataIndex: 'number',
    key: 'number',
    width: '12%',
  },
 
    {
    title: '创建时间',
    dataIndex: 'time',
    key: 'time',
    width: '12%',
  },
      {
    title: '操作',
    dataIndex: 'edit',
    key: 'edit',
        
      render: () => (
        <Space size="middle">
          <a >新增</a>
        <a>编辑 </a>
        <a>删除</a>
      </Space>
    ),
  },
];
const ft = () => {
  console.log(123);
}
const data = [
  {
    key: 1,
    name: '运营部',
   number: 60,
    describe:'New York No. 2 Lake Park',
     time:"2022-11-11",
   
  },
  {
    key: 2,
    name: '产品部',
    number: 32,
    describe: 'Sidney No. 1 Lake Park',
    time:'2022-1-1',
     children: [
          {
            key: 132,
            name: '基础生产线',
            number: 42,
            describe: 'London No. 2 Lake Park',
           
            
       },
        {
                key: 13121,
                name: '支付生产线',
                number: 25,
                describe: 'London No. 3 Lake Park',
              },
              {
                key: 13122,
                name: '营销生产线',
                number: 18,
                describe: 'London No. 4 Lake Park',
              },
        ],
  },
];

// rowSelection objects indicates the need for row selection
// const rowSelection = {
//   onChange: (selectedRowKeys, selectedRows) => {
//     console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
//   },
//   onSelect: (record, selected, selectedRows) => {
//     console.log(record, selected, selectedRows);
//   },
//   onSelectAll: (selected, selectedRows, changeRows) => {
//     console.log(selected, selectedRows, changeRows);
//   },
// };
const showTotal = (total) => `Total ${total} items`;
export default function DepartmentMannumberment() {
  return (
    <div style={{backgroundColor:'white'}}>
      <h1>部门管理</h1>
       <div style={{backgroundColor:'white',height:'15%',display:'flex',alignItems:'center'}}> <Button style={{marginLeft:'1%'}} type="primary" size={'large'}>
           新建部门
      </Button ></div>
      <Table
        columns={columns}
        pagination={false}
        dataSource={data}
        expandable={{
          expandedRowRender: record => (
      <p style={{ margin: 0 }}>这是一段部门描述</p>
            
          ),
          expandIcon: ({ expanded, onExpand, record }) =>
            expanded ? (
              // <MinusCircleTwoTone onClick={e => onExpand(record, e)} />
              <UpOutlined onClick={e => onExpand(record, e)} />
            ) : (
              // <PlusCircleTwoTone onClick={e => onExpand(record, e)} />
        
              <RightOutlined onClick={e => onExpand(record, e)} />
            )
        }}
     



      />
       <div style={{backgroundColor:'white',marginTop:'2%'}}> <Pagination
      size="small"
      total={data.length}
     
    showTotal={showTotal}
      showSizeChanger
      showQuickJumper
    /></div>
   
    </div>
  )
}
